<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .jSignature{
        width: 100%!important;
        height: 500px!important;
    }
</style>
<body>

<div class="signature" style="width: 100%;height: 500px;background: #f1f1f1"></div>
<div style="text-align: center">
    <a class="sure">确定</a>
    <a class="cancle">取消</a>
</div>
</body>
<script src="../lib/jquery/jquery-1.11.0.js"></script>
<script src="../lib/sign-name/jSignature.min.noconflict.js"></script>
<script>
    $(function () {
        $('.signature').jSignature();
        $('.sure').click(function () {
            var dataUrl=$('.signature').jSignature('getData','native');
            console.log(dataUrl);
        });
        $('.cancle').click(function () {
            $('.signature').jSignature('reset')
        })
    });
</script>
</html>